<script type='text/javascript' src='raphael.js'> </script>
<script type='text/javascript' src='BandAnnotator.js'> </script>

<!-- <div style='border:1px dashed black;' id='bacontainer'></div> -->
<div style='width:400px;height:50px;border:1px dashed black;' id='bacontainer'></div>

<script type='text/javascript'>

var bandClickHandler = function(raphaevent) {
	if(!raphaevent.target.raphael) return;
	var fmd = raphaevent.target.raphael.attrs.metadata;
	var bao = raphaevent.target.raphael.attrs.metadata['bandAnnotatorObject'];
	if(!fmd || !bao) return;
	//alert("handler says: i will hide feature named " + fmd.featurename + " " + bao.feature2objects);
	//bao.featureHideShow([fmd.featurename], "hide");
	//return;
	// rectangular extents of element clicked TODO check
	var fxy = bao.raphaMouseEventToBandFractionalXY(raphaevent);
	var bindex = Math.floor(fmd.start + fxy[0]*(fmd.end-fmd.start));
	alert(fmd.featurename + " " + bindex + " fractional click position : " + fxy);
}

var printMap = function(amap, showval) {
	var str = '';
	for(var k in amap) {
		str += k + ",";
		if(showval) str += amap[k];
		str += " ---- ";
	}
	alert(str);
}

window.onload = function() {
	var bandfeatures = [], bandlength = 100;
	bandfeatures.push( {start:0, end:bandlength-1, type:'band', vstart:'0%', vend:'100%', color:'white',
		metadata:{featurename:'full-band'}, mouseclick:bandClickHandler
	} );
	bandfeatures.push( {start:10, end:30, type:'band', vstart:'10%', vend:'60%', startstyle:'curved', endstyle:'flat', color:'red',
		text:'hello', 'fontsize':10, textLocation:'start', textOrient:'vertical',
		metadata:{featurename:'band-swan', start:10, end:30}, mouseclick:bandClickHandler
	} );
	bandfeatures.push( {start:20, end:80, type:'band', vstart:'50%', vend:'80%', startstyle:'curved', endstyle:'flat', color:'green',
		text:'hieee', 'fontsize':10, textLocation:'start', textOrient:'vertical',
		metadata:{featurename:'band-deo', start:20, end:80}, mouseclick:bandClickHandler
	} );
	bandfeatures.push( {start:25, type:'point', pointstyle:'square', color:'blue',
		text:'point', 'fontsize':10, textLocation:'start', textOrient:'vertical',
		metadata:{featurename:'squarepoint'}, mouseclick:bandClickHandler
	} );
	bandfeatures.push( {start:20, end:80, type:'bridge', base:'50%', height:'10%', color:'purple',
		text:'hieee', 'fontsize':10, textLocation:'start', textOrient:'vertical',
		metadata:{featurename:'a-bridge'}, mouseclick:bandClickHandler, mousedetection:'10%'
	} );
	var ba = BandAnnotator({container:'bacontainer', canvasWidth:400, canvasHeight:50,
		features:bandfeatures, metadata:{featurename:'a full band'}, length:bandlength,
		mouseclick:function(raphaevent,bandMetadata) { alert("whole band metadata " + bandMetadata); }
	});
	ba.render();
};
</script>
